<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- 先引入react,再引入react-dom,因为react是核心库，react-dom是扩展库 -->
<!-- 引入以后全局多了一个REACT和ReactDOM对象 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 用于将jsx转为js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="example"></div>
<!-- 此处一定要写babel，不写就是默认js -->
<script type="text/babel">

class Weather extends React.Component {
  // 构造器调用一次
  constructor(props){
    super(props)
    this.state = {
      isHot: true,
      wind: "大风"
    }
  }
  // render调用1+n次，n是状态更新的次数
  render(){
    // 这里写demo而不是demo(),写demo()相当于把返回的undefined作为onClick的回调
    return <h2 onClick={demo}>今天天气很{this.state.isHot ? "炎热": "凉爽"}</h2>
  }
}

ReactDOM.render(
	<Weather/>,
	document.getElementById('example')
);

function demo() {
  console.log("nihao");
}
</script>

</body>
</html>